<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<style type="text/css">
			#register_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
			}
			
			.app_head_left {
				float: left;
				width: 30%;
				padding-top: 6px;
				padding-bottom: 6px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 40%;
				padding-top: 5px;
			}
			
			.app_head_right {
				float: right;
				width: 30%;
				text-align: right;
				padding: 12px;
			}
			
			.app_head_right a {
				color: #FFFFFF;
				font-size: 1.3em;
				font-weight: bold;
				font-family: "黑体";
			}
			
			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}
			/*----输入框----*/
			
			#register_main input[type=text],
			#register_main input[type=password] {
				width: 100%;
				border: none;
				outline: none;
				height: 100%;
				border-radius: 8px;
				font-size: 1.3em;
				color: #CDCDCD;
				padding-left: 1em;
			}
			/*----按钮----*/
			
			.btnBottom {
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
				width: 100%;
				margin-top: 55px;
				/*position: fixed;*/
				text-align: center;
			}
			
			.myRegister {
				font-size: 1.2em;
				width: 40%;
				height: 45px;
				border-radius: 20px;
				display: block;
				background-color: #0070B4;
				text-align: center;
				line-height: 45px;
				color: #FFFFFF;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
			}
			
			.mycannotRegister {
				font-size: 1.2em;
				width: 40%;
				height: 45px;
				border-radius: 20px;
				display: block;
				background-color: #DCDCDC;
				text-align: center;
				line-height: 45px;
				color: #FFFFFF;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
			}
			
			.tiaozhuan_login {
				display: block;
				margin-top: 20px;
				color: #A1A1A1;
			}
			/*----验证提示----*/
			
			.yanzhengtishi {
				color: #FF0000;
				margin-top: 5px;
				text-align: left;
				height: 25px;
				font-size: 14px;
				width: 90%;
				margin: 0 auto;
			}
			/*----添加提示边框----*/
			
			.wrongB {
				border-color: #FF0000 !important;
			}
			
			.trueB {
				border-color: #0070B4 !important;
			}
			/*----发送验证码按钮----*/
			
			#sendYzm {
				font-size: 1.2em;
				width: 40%;
				height: 45px;
				border-radius: 20px;
				display: block;
				background-color: #0070B4;
				text-align: center;
				line-height: 45px;
				color: #FFFFFF;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
			}
			
			#cannotSendYzm {
				font-size: 1em;
				float: right;
				margin-right: 1;
				width: 25%;
				margin-left: 5%;
				margin-right: 5%;
				height: 35px;
				margin-top: 8px;
				border-radius: 15px;
				display: block;
				background-color: #DCDCDC;
				text-align: center;
				line-height: 37px;
				color: #FFFFFF;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
			}
			
			.inputAndBtn {
				width: 94%;
				height: 55px;
				margin-left: 3%;
				margin-right: 3%;
				border: 1px solid #E9E9E9;
				border-radius: 8px;
			}
			
			#registerYzm {
				width: 65% !important;
				height: 100% !important;
				float: left;
				border: none !important;
				outline: none !important;
			}
			
			#my_yzm {
				margin-top: 9px;
			}
			/*#register_TS{
				border: 1px solid;
			}*/
			
			.register_mid {
				padding-top: 70px;
			}
		</style>
	</head>

	<body ontouchstart>
		<div id="register_main">
			<div class="index_head">
				<div class="app_head_left">
					<a href="Login.html" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">帐号管理</p>
				</div>
			</div>
			<div class="register_mid">
				<!--输入手机号-->
				<div class="inputAndBtn" style="margin-top: 20px;">
					<input type="text" name="" id="registerPhone" placeholder="请输入手机号" />
				</div>
				<p class="yanzhengtishi"></p>
				<!--输入密码-->
				<div class="inputAndBtn">
					<input type="password" name="" id="pwdFirst" placeholder="请输入密码" />
				</div>
				<p class="yanzhengtishi"></p>
				<!--再次输入-->
				<div class="inputAndBtn">
					<input type="password" name="" id="pwdSecond" placeholder="请再次输入密码" />
				</div>
				<p class="yanzhengtishi"></p>

				<!--验证码与发送验证码按钮区域-->
				<div class="inputAndBtn">
					<input type="text" name="" id="registerYzm" placeholder="请输入验证码" />
					<!--<a href="javascript" id="sendYzm" style="display: none;">发送验证码</a>
				<a href="javascript" id="cannotSendYzm">发送验证码</a>-->
					<canvas id="my_yzm" class="yzm" onclick="yzmNum()"></canvas>
				</div>
				<p class="yanzhengtishi" id="register_TS"></p>
				<div class="btnBottom">
					<a href="javascript:;" class="myRegister" id="register" style="display: none;">注&nbsp;&nbsp;册</a>
					<a href="javascript:;" class="mycannotRegister" id="cannotregister">注&nbsp;&nbsp;册</a>
					<a class="tiaozhuan_login" href="Login.html">已有帐号？去登录</p>
				</div>
			</div>
		</div>

		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/crypto-js.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/aes.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/pad-zeropadding.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/encryption.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var num0 = 0;
			var num1 = 0;
			var num2 = 0;
			var num3 = 0;
			//验证手机号
			$("#registerPhone").keyup(function() {
				var phone = /^[1][34578][0-9]{9}$/;
				var Input = $(this).parent();
				if(phone.test(this.value)) {
					Input.removeClass("wrongB");
					Input.addClass("trueB");
					Input.next().html("");
					num0 = 1;
					//					document.getElementById("cannotregister").style.display = "none";
					//					document.getElementById("register").style.display = "block";
				} else {
					Input.removeClass("trueB");
					Input.addClass("wrongB");
					Input.next().html("请先输入正确的手机号码");
					num0 = 0;
				}
				changeBlue();
			});
			//验证自定义密码
			$("#pwdFirst").keyup(function() {
				var Pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,18}$/;
				var Input = $(this).parent();
				//重复密码框
				var nextInput = $("#pwdSecond").val();
				if(Pwd.test(this.value)) {
					Input.removeClass("wrongB");
					Input.addClass("trueB");
					Input.next().html("");
					num1 = 1;
					//					document.getElementById("cannotregister").style.display = "none";
					//					document.getElementById("register").style.display = "block";
					if(nextInput == this.value) {
						$("#pwdSecond").parent().removeClass("wrongB");
						$("#pwdSecond").parent().addClass("trueB");
						num2 = 1;
					} else {
						$("#pwdSecond").parent().removeClass("trueB");
						$("#pwdSecond").parent().addClass("wrongB");
						num2 = 0;
					}
				} else {
					Input.removeClass("trueB");
					Input.addClass("wrongB");
					Input.next().html("请输入8-18位数字和英文字母作为您的密码");
					num1 = 0;
				}
				changeBlue();
			});
			//重复密码

			$("#pwdSecond").keyup(function() {
				var Input = $(this).parent();
				var pwdFirst = Input.prev().prev().children().val();
				if(this.value != pwdFirst) {
					Input.removeClass("trueB");
					Input.addClass("wrongB");
					num2 = 0;
				} else {
					var Pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,18}$/;
					if(!Pwd.test(this.value)) {
						Input.removeClass("trueB");
						Input.addClass("wrongB");
						num2 = 0;
					} else {
						//						Input.next().html("");
						Input.removeClass("wrongB");
						Input.addClass("trueB");
						num2 = 1;
					}
				}
				changeBlue();
			});

			//验证码
			var nn;
			window.onload = function() {
				var canvas = document.getElementById("my_yzm");
				canvas.width = 100;
				canvas.height = 30;
				var ctx = canvas.getContext("2d");
				ctx.fillStyle = "rgb(0,0,0)";
				ctx.fillRect(0, 0, 100, 30);
				ctx.fillStyle = getRandomColor();
				yzmNum();
				ctx.fillText(nn, 25, 22);
			}

			function yzmNum() {
				var ran = parseInt(Math.random() * 10000) % 9000 + 1000;
				nn = ran;
				var canvas = document.getElementById("my_yzm");
				canvas.width = 100;
				canvas.height = 33;
				var ctx = canvas.getContext("2d");
				ctx.fillStyle = "rgb(0,0,0)";
				ctx.fillRect(0, 0, 100, 33);
				ctx.font = "26px 微软雅黑";
				ctx.fillStyle = getRandomColor();
				ctx.fillText(nn, 22, 26);
				for(var i = 0; i < 10; i++) {
					var w1 = parseInt(Math.random() * 10000) % canvas.width;
					var h1 = parseInt(Math.random() * 10000) % canvas.height;
					ctx.moveTo(w1, h1);
					w1 = w1 = parseInt(Math.random() * 10000) % canvas.width;
					h1 = parseInt(Math.random() * 10000) % canvas.height;
					ctx.lineTo(w1, h1);
					ctx.strokeStyle = getRandomColor();
					ctx.stroke();
				}
				for(var i = 0; i < 100; i++) {
					ctx.beginPath();
					var w1 = parseInt(Math.random() * 10000) % canvas.width;
					var h1 = parseInt(Math.random() * 10000) % canvas.height;
					ctx.moveTo(w1, h1);
					ctx.lineTo(w1 + 1, h1 + 1);
					ctx.strokeStyle = getRandomColor();
					ctx.stroke();

				}
				ctx.fillStyle = "rgba(255,20,0,0.2)";
				ctx.fillRect(0, 0, 100, 33);
			}

			function getRandomColor() {
				var r = parseInt(Math.random() * 10000) % 256;
				var g = parseInt(Math.random() * 10000) % 256;
				var b = parseInt(Math.random() * 10000) % 256;
				return "rgb(" + r + "," + g + "," + b + ")";
			}
			//验证输入的验证码
			$("#registerYzm").keyup(function() {
				var Input = $(this).parent();
				if(this.value == nn) {
					Input.next().html("");
					Input.removeClass("wrongB");
					Input.addClass("trueB");
					num3 = 1;
				} else {
					Input.removeClass("trueB");
					Input.addClass("wrongB");
					Input.next().html("验证码看不清楚？可点击更换");
					num3 = 0;
				}
				changeBlue();
			});

			function changeBlue() {
				if(num0 == 1 && num1 == 1 && num2 == 1 && num3 == 1) {
					$("#cannotregister").css("display", "none");
					$("#register").css("display", "block");
				} else {
					$("#register").css("display", "none");
					$("#cannotregister").css("display", "block");
				}
				//				console.log(num0 + "--" + num1 + "--" + num2 + "--" + num3);
			}

			$("#register").click(function() {
				var n1 = $("#registerPhone").val();
				var n2 = $("#pwdFirst").val();
				var allData = "USERNAME:" + n1 + ",PASSWORD:" + n2 + "";
				allData = encrypt(allData);
				$.ajax({
					type: "post",
					url: Url,
					async: false,
					data: {
						"type": "register",
						"DATA": "" + allData + ""
					},
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						//									console.log(data.MSG);
						if(data.MSG == "已注册") {
							$.alert("号码已注册，请直接登录", "提示");
						} else {
							console.log(data.MSG);
							$.alert("注册成功！", "恭喜", function() {
								//点击确认后的回调函数
								var username = $("#registerPhone").val();
								var userJson = {
									username: username
								};
								var arr = [userJson];
								//将登录用户名存入浏览器本地存储
								localStorage.userJson = JSON.stringify(arr);
								$.alert("请设置您的密保问题", function() {
									//点击跳转至密保问题页面
									window.location.href = "findPwd.html";
								});
							});
						}
					},
					error: function(data) {
						$.alert("服务器忙，请稍后再试", "提示");
					}
				});
			});
		</script>
	</body>

</html>